{% include "header.tpl" %}
<script type="text/javascript">
	window.onload = function() {
		var base = new dhtmlXLayoutObject('container', '3L', 'dhx_skyblue');
        base.cont.obj._offsetTop = 60;
        base.cont.obj._offsetLeft = 30;
		base.cells("b").setWidth(500);
		base.cells("a").hideArrow();
		var text = base.cells("a").setText("Users");
		var text = base.cells("b").setText("User Details");
		var text = base.cells("c").setText("Current Projects");

		var toolbar = base.attachToolbar();
		toolbar.setIconsPath("images/");
		toolbar.setIconSize(48);

		// adding a home link for default
		toolbar.addButton('home', 'Home', 'Home');
		toolbar.setItemImage('home', 'Home.png');
		toolbar.setItemToolTip('home', 'Home');
		toolbar.attachEvent("onClick", function(id) {
			menuButtons(id);
		});
		// build the menus dynamically from ajax call to controller
		$.getJSON('core/getMenu', function(data) {
			$.each(data, function(key, value) {
				buildToolbar(value, toolbar);
			})
		})
		// status bar
		var statusBar = base.attachStatusBar();

		// setup context menu
		//var cMenu = base.cells('a').attachMenu();
		//cMenu.addNewSibling(null, 'add_user', 'Add User', false);
		//cMenu.addNewSibling('add_user', 'edit_user', 'Edit User', false);
		//cMenu.addNewSibling('edit_user', 'del_user', 'Delete User', false);
		//cMenu.attachEvent('onClick', function(id, zoneId, casState) {
		//	contextMenuClick(id, statusBar);
		//});

		// setup grid
		accountsGrid = base.cells("a").attachGrid();
		accountsGrid.setHeader('Last Name, First Name, Email, Role');
		accountsGrid.setInitWidths('100, 100, 300, 100');
		accountsGrid.setColSorting('str, str, str, str');
		accountsGrid.setImagePath('css/imgs/');
		accountsGrid.init();
		accountsGrid.load('accounts/list_users', 'json');
		accountsGrid.attachEvent("onRowSelect", function(id, ind){
			getUserProjects(id);
		});

		// setup user details form
		formStructure = [
			{type: "settings", position: "label-left", inputWidth: 200},
			{type: "input", name: "first_name", label: "First Name:", validate:"NotEmpty", required: true},
			{type: "input", name: "last_name", label: "Last Name:"},
			{type: "input", name: "email", label: "Email:", validate: "NotEmpty", required: true},
			{type: "select", name: 'role', label: 'Role:', options:[
				{text: "Project Manager", value: 1},
				{text: "Scrum Master", value: 2},
				{text: "Team Member", value: 3},
			]},
			{type: "input", name: "phone", label: "Phone: "},
			{type: "button", name: "btn", value: "Save"}
		];
		userForm = base.cells("b").attachForm(formStructure);

		// setup projects list
		projectsGrid = base.cells("c").attachGrid();
		projectsGrid.setHeader('Pri, Type, Name');
		projectsGrid.setInitWidths('35, 100, *');
		projectsGrid.setColSorting('int, str, str, str');
		projectsGrid.setImagePath('css/imgs/');
		projectsGrid.init();
	}

getUserProjects = function(user_id) {
	var projectsUrl = "projects/listByUser/"+user_id;
	projectsGrid.clearAll();	// clear the grid before loading new data
	projectsGrid.load(projectsUrl, 'json');
}
</script>
</head>
<body>
    <div id="header">
        <span id='header_text'>Encompass</span>
        <br />
        <span id='tagline'>Project Management</span>
    </div>
    <div id="container"></div>
    <div id="footer"></div>
</body>
</html> 
